<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <title>Document</title>
</head>

<body>
    <!-- 头部导航 -->
    <div class="header">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand wow fadeInLeft" href="#">
                                <img src="./img/logo.png" alt="">
                            </a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="active wow fadeInDown"><a href="#">首页</a></li>
                                <li class="wow fadeInDown" data-wow-delay="100ms"><a href="#">解决方案</a></li>
                                <li class="wow fadeInDown" data-wow-delay="200ms"><a href="#">资讯中心</a></li>
                                <li class="wow fadeInDown" data-wow-delay="300ms"><a href="#">案例展示</a></li>
                                <li class="wow fadeInDown" data-wow-delay="400ms"><a href="#">联系微豆</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="./img/banner.png" alt="First slide">
                </div>
                <div class="item">
                    <img src="./img/banner.png" alt="Second slide">
                </div>
                <div class="item">
                    <img src="./img/banner.png" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <!-- 内容 -->
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="main-nav">
                    <a href="#" class="wow fadeInUp">首页&gt;</a>
                    <a href="#" class="wow fadeInUp">案例展示&gt;</a>
                    <a href="#" class="wow fadeInUp">网页案例</a>
                </div>

                <div class="main-top wow fadeInDown">
                    <div class="main-title">我们的优秀作品</div>
                    <div class="main-border"></div>
                    <div class="main-font">OUR CASES</div>
                </div>
            </div>
        </div>

        <div class="container list">
            <div class="row">
                <div class="main-list">
                    <div class="wow fadeInDown">网页作品</div>
                    <div class="wow fadeInDown">APP作品</div>
                    <div class="wow fadeInDown">H5作品</div>
                    <div class="wow fadeInDown">平面作品</div>
                </div>
            </div>
        </div>

        <div class="menu">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInLeft">
                            <div class="menu-img">
                                <img src="./img/图层 2.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInLeft">
                            <div class="menu-img">
                                <img src="./img/图层 3.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInRight">
                            <div class="menu-img">
                                <img src="./img/图层 4.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInRight">
                            <div class="menu-img">
                                <img src="./img/图层 5.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInLeft">
                            <div class="menu-img">
                                <img src="./img/图层 2.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInLeft">
                            <div class="menu-img">
                                <img src="./img/图层 3.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInRight">
                            <div class="menu-img">
                                <img src="./img/图层 4.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInRight">
                            <div class="menu-img">
                                <img src="./img/图层 5.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInRight">
                            <div class="menu-img">
                                <img src="./img/图层 2.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInRight">
                            <div class="menu-img">
                                <img src="./img/图层 3.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInLeft">
                            <div class="menu-img">
                                <img src="./img/图层 4.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInLeft">
                            <div class="menu-img">
                                <img src="./img/图层 5.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInRight">
                            <div class="menu-img">
                                <img src="./img/图层 2.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInRight">
                            <div class="menu-img">
                                <img src="./img/图层 3.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInLeft">
                            <div class="menu-img">
                                <img src="./img/图层 4.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6">
                        <div class="menu-box wow fadeInLeft">
                            <div class="menu-img">
                                <img src="./img/图层 5.png" alt="">
                            </div>
                            <div class="menu-font">
                                <p>2017设计集锦</p>
                                <p>2017-08-16</p>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="paging wow fadeInDownBig">
                        <ul class="pagination">
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">…</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="footer-img wow fadeInDown">
                            <img src="./img/03.gif" alt="">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="footer-img wow fadeInDown">
                            <img src="./img/04.gif" alt="">
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <div class="footer-img wow fadeInDown">
                            <img src="./img/05.gif" alt="">
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <div class="footer-img wow fadeInDown">
                            <img src="./img/06.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="footer-box wow fadeInDown">
                        <div class="footer-icon">
                            <div><img src="./img/icon.png" alt=""></div>
                            <div>400-889-7654</div>
                        </div>
                        <div>
                            <div>COPYRIGHT (C) 2017 微豆科技有限公司版权所有 . ALL RIGHTS RESERVED</div>
                        </div>
                        <div>
                            <div>粤ICP备12022584号-3       法律顾问：广东晟晨律师事务所-张勇律师</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<!-- 引入JQ文件 注意：JQ是一定在js前面引入 -->
<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入bootstrap JS文件 -->
<script src="https://cdn.staticfile.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./js/wow.min.js"></script>
<script src="./js/loop.js"></script>
<script>
    // 轮播图循环
    $('#myCarousel').carousel({
        interval: 2000
    })

    // 初始化
    new WOW().init();
</script>

</html>